<template>
  <div class="content">
    <div class="center_box">
      <div class="add_box">
        <h3>基础信息</h3>
        <div class="add_right">
          <el-form
            label-position="top"
            label-width="auto"
            :model="objectForm"
            style="margin: auto"
            ref="fromRef"
          >
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="企业账户:" required prop="username">
                  <el-input v-model="objectForm.username" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="密码:" required prop="password">
                  <el-input v-model="objectForm.password" type="password" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="确认密码:" required prop="confirmPassword">
                  <el-input
                    v-model="objectForm.confirmPassword"
                    type="password"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="邮件:" required prop="email">
                  <el-input v-model="objectForm.email" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="公司:" prop="tenantInfo">
                  <!-- <HhSelect type='tenant' @change="hChange" v-model="tenantInfo"/> -->
                  <el-input v-model="objectForm.email" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="角色:" prop="userRole">
                  <el-select v-model="objectForm.userRole" placeholder="请选择">
                    <el-option label="后台用户" value="2" />
                    <el-option label="小程序用户" value="3" />
                    <el-option label="后台管理员" value="1" />
                    <el-option label="后台超级管理员" value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="title_h_box">
              <h3>拓展信息</h3>
            </div>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="计费模式:" prop="fullName">
                  <el-input v-model="objectForm.fullName" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="单价设定:" prop="gender">
                  <el-select v-model="objectForm.gender" placeholder="请选择">
                    <el-option label="男" value="0" />
                    <el-option label="女" value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                                <el-form-item label="单价设定:" prop="birthDate">
                                        <el-date-picker
                                        v-model="objectForm.birthDate"
                                        type="datetime"
                                        placeholder="生日"
                                        format="YYYY-MM-DD HH:mm:ss"
                                        value-format="YYYY-MM-DD HH:mm:ss"
                                        style="width:100%;"
                                    />
                                    <el-input v-model="objectForm.phone" />
                                </el-form-item>
                            </el-col> -->
              <el-col :span="8">
                <el-form-item label="特殊定制:" prop="phone">
                  <el-input v-model="objectForm.phone" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否启用" prop="isActive">
                  <el-switch
                    :active-value="1"
                    :inactive-value="0"
                    v-model="objectForm.isActive"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="title_h_box" style="justify-content: flex-end">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirmAdd">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineOptions, ref } from "vue";
import { ElMessage } from "element-plus";
import HhSelect from "../../components/utils/HhSelect.vue";
import { useRouter } from "vue-router";
import * as userApi from "../../../api/project1/user/user.js";

defineOptions({ name: "UserInfo" });

const objectForm = ref({
  username: "",
  email: "",
  password: "",
  fullName: "",
  birthDate: null,
  gender: "",
  address: "",
  phone: "",
  openId: "",
  isActive: 1,
  userRole: "",
});

const tenantInfo = ref({});

const fromRef = ref();

const router = new useRouter();
const hChange = (e) => {
  objectForm.value.tenantId = e.id;
};

const cancel = (e) => {
  router.push({
    name: "user",
  });
};

const confirmAdd = async () => {
  // const res = await userApi.saveOrUpate(objectForm.value)
  const { code, msg } = res;
  if (code == "200 ") {
    ElMessage.success("操作成功");
    fromRef.value.resetFields();
    return;
  }
  ElMessage.error(msg);
};
</script>

<style lang="less" scoped>
.add_right {
  width: 90%;
  height: 80%;
}

.center_box {
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 0;
  padding-top: 0;
}
.add_box {
  padding-top: 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 0;
}
.title_h_box {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
</style>